<!-- 配置管理 -->
<template>
  <div>
    <el-row class="cardMiniBar">
      <el-col :span="24">
        <div class="fr">
          <el-button type="primary" @click="batchUpdate" size="small"
            >批量保存</el-button
          >
        </div>
      </el-col>
    </el-row>
    <div class="cardBody">
      <el-tabs
        class="pageTab"
        v-model="tabCode"
        type="card"
        @tab-click="tabClick"
      >
        <el-tab-pane
          v-for="(tab, index) in tabs"
          :label="tab.name"
          :name="tab.categoryId"
          :key="tab.name"
        ></el-tab-pane>
      </el-tabs>

      <edu-table
        ref="mainTable"
        :data="tableList"
        :order="true"
        :selection="true"
        :pagination="false"
      >
        <el-table-column label="标题" prop="configName" width="180" />
        <!-- <el-table-column label="id" prop="configId" /> -->
        <el-table-column label="分类" prop="categoryId" width="90" />
        <el-table-column label="描述" prop="description" />
        <el-table-column label="配置值" prop="configValue">
          <template slot-scope="scope">
            <el-input-number
              v-model="scope.row.configValue"
              v-if="scope.row.configType == 5"
              controls-position="right"
              :min="0"
              clearable
              size="small"
              style="width:100%"
            />
            <Upload 
              v-model="scope.row.configValue" 
              v-else-if="scope.row.configType == 3" 
              :ref="`uploadComp${scope.$index}`" 
            />
            <el-input
              v-model="scope.row.configValue"
              v-else
              clearable
              size="small"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100px">
          <template slot-scope="scope">
            <el-button type="text" @click="update(scope.row)" size="small">
              保存
            </el-button>
          </template>
        </el-table-column>
      </edu-table>
    </div>
  </div>
</template>

<script>
import {
  querySystemConfigCategoryList,
  querySystemConfigList,
  updateSystemConfig,
  batchUpdateSystemConfig,
} from "@/api/configuration";
import mixins from "@/mixins";

// （1：密码类型；2：文本类型；3：文件类型；4：枚举类型；5：数字文本；6：文本域）
export default {
  mixins: [mixins],
  data() {
    return {
      tableList: [],
      tabCode: "",
      tabs: [],
    };
  },
  created() {
    this.initOptions();
  },
  methods: {
    async initOptions() {
      let { returnObj } = await querySystemConfigCategoryList({});
      this.tabs = returnObj;

      this.tabCode = returnObj[0].categoryId;
      this.tabClick({ name: this.tabCode });
    },
    tabClick(tab) {
      // this.tempTableList = this.tableList.filter((item) => {
      //   return item.categoryId === tab.name;
      // });
      this.query();
    },
    async query() {
      let { returnObj } = await querySystemConfigList({
        condition: {
          categoryId: this.tabCode,
        },
        pageNum: 1,
        pageSize: 10,
      });
      // let temp = returnObj.list.sort((a, b) => {
      //   return a.categoryId - b.categoryId;
      // });
      this.tableList = returnObj.list;

      setTimeout(() => {
        returnObj.list.map((item,index)=>{
          if(item.configType == '3'){
            this.$refs[`uploadComp${index}`].init()
          }
        })
      },1000);
    },
    async update(row) {
      if (row.validator) {
        let eregRes = new RegExp(row.validator).test(row.configValue);
        if (!eregRes) {
          this.$message({
            type: "warning",
            message: "配置值不正确，请修改",
          });

          return false;
        }
      }

      await updateSystemConfig({
        configId: row.configId, // 配置项KEY
        configValue: row.configValue, // 配置项值
      });

      this.$message({
        type: "success",
        message: "配置修改成功",
      });
    },
    async batchUpdate() {
      let pass = {
        line: null,
        result: true,
      };
      let temp = this.tableList.map((item) => {
        if (item.validator) {
          let eregRes = new RegExp(item.validator).test(item.configValue);
          if (!eregRes) {
            pass.line = item;
            pass.result = false;
          }
        }

        return {
          configId: item.configId,
          configValue: item.configValue,
        };
      });

      if (!pass.result) {
        this.$message({
          type: "warning",
          message: pass.line.configName + "配置值不正确，请修改",
        });

        return false;
      }

      await batchUpdateSystemConfig(temp);

      this.$message({
        type: "success",
        message: "批量修改成功",
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>
